<template>
	<view class="main">
		<view class="current_phone">
			<text></text>
		</view>
		<u-field class="input-phone" v-model="newPhoneNumber" label-width="0" placeholder="请输入手机号">
			<view class="ic-phone" slot="icon">
				<image class="ic-phone" src="/static/logo.png"></image>
			</view>
		</u-field>

		<view class='view-captcha'>
			<u-field class="input-captcha" v-model="captcha" label-width="0" placeholder="请输入验证码">
				<view class="ic-phone" slot="icon">
					<image class="ic-phone" src="/static/logo.png"></image>
				</view>
			</u-field>

			<u-verification-code class='btn-captcha' seconds="60" @end="captchaEnd" @start="captchaStart" ref="uCode"
				@change="captchaCodeChange">
			</u-verification-code> 
			<u-button :disabled="!btnCaptchaEnable" class='btn-captcha' @click="captchaGetCode()" :ripple="true" hair-line=false>{{tips}}</u-button>

		</view>

		<u-button  class='btn-submit' @click="clkSubmit()" :ripple="true" hair-line=false>登录</u-button>
		<u-modal v-model="showDialog" title="设置密码"  @confirm="confirmEditFolder">
			<view class="wrapper-dialog">
				<view class="slot-content">
					<u-field class="input-phone1 input-phone" :password="true"  v-model="passwork" label-width="0" placeholder="请输入密码">
						<view class="ic-phone" slot="icon">
							<image class="ic-phone" src="/static/logo.png"></image>
						</view>
					</u-field>
				</view>
				<view class="slot-content">
					<u-field class="input-phone1 input-phone" :password="true"  v-model="newpasswork" label-width="0" placeholder="再次输入密码">
						<view class="ic-phone" slot="icon">
							<image class="ic-phone" src="/static/logo.png"></image>
						</view>
					</u-field>
				</view>
			</view>
		</u-modal>
	</view>



</template>

<script>
	import apis from '@/apis.js'
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showDialog: false,
				phoneNumber: '15911235698',
				newPhoneNumber: '',
				captcha: '',
				tips: '',
				btnCaptchaEnable: true,
				openId: null,
				authorization: null,
				passwordFlag: false,
				passwork: '',
				newpasswork: ''
			}
		},
		computed: {
			phoneNumberStr: function() {
				return this.phoneNumber.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2")
			}
		},
		onLoad(options) {
			this.openId = options.openId
		},
		methods: {
			...mapActions(['Login']),
			confirmEditFolder() {
				this.showDialog = true
				if (!this.passwork) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (this.passwork.length <6) {
					uni.showToast({
						title: '密码长度要大于等于6',
						icon: 'none'
					})
					return
				}
				if (!this.newpasswork) {
					uni.showToast({
						title: '请再次输入密码',
						icon: 'none'
						
					})
					return
				}
				if (this.passwork !== this.newpasswork) {
					uni.showToast({
						title: '两次密码需一致',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: apis.savePassword,
					data: { openId: this.openId, passwork: this.passwork, phone: this.newPhoneNumber },
					method: 'post',
					success: (res) => {
						if (res.data.code === 200) {
							this.Login({ token:res.data.result.authorization })
							this.getSelfAuthorId()
							this.showDialog = false
						}
					},
				})
			},
			cancelEditFolder() {
				this.showDialog = false
			},
			clkSubmit() {
				if (!this.newPhoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				let myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.newPhoneNumber)) {
				    uni.showToast({
				    	title: '请输入正确的手机号',
				    	icon: 'none',
				    	
				    })
				    return
				} 
				if (!this.captcha) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: apis.loginPhone,
					data: { phone: this.newPhoneNumber,  validateCode: this.captcha, openId: this.openId },
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.passwordFlag = res.data.result.passwordFlag
							if (!this.passwordFlag) {
								this.showDialog = true
							}
						}
					},
				})
			},
			// 获取登陆人信息
			getSelfAuthorId() {
				this.$http.get(apis.userAuthor_detail, { }).then(res => {
					if (res.data.code === 200) {
						if (res.data.result.subjectType !== null) {
							uni.switchTab({
								url: '/pages/tabbar/tabbar-1/tabbar-1'
							})
						} else {
							uni.navigateTo({
								url: '/pages/community/major/major'
							})
						}
					}
				})
			},
			clkGetCaptcha: function() {},
			captchaGetCode(text) {
				if (!this.newPhoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				let myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.newPhoneNumber)) {
				    uni.showToast({
				    	title: '请输入正确的手机号',
				    	icon: 'none',
				    	
				    })
				    return
				} 
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					uni.request({
						url: apis.loginPhoneValidate,
						data: { phone: this.newPhoneNumber },
						method: 'get',
						success: (res) => {
							if (res.data.code === 200) {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}
						},
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			captchaCodeChange(text) {
				this.tips = text;
			},
			captchaEnd: function() {
				this.btnCaptchaEnable = true
			},
			captchaStart: function() {
				this.btnCaptchaEnable = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper-dialog {
		padding: 0 20px;
	}
	.main {
		padding: 29rpx;
		
		.current_phone {
			font-size: 31rpx;
			margin-top: 188rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 40rpx;
			color: #4D5B80;
			opacity: 1;

		}

		.input-phone {
			margin-top: 62rpx;
			background: #E9EBF4;
			padding: 10rpx 20rpx 10rpx 20rpx;
			opacity: 1;
			border-radius: 8px;
		}
		.input-phone1{
			margin: 20px 0;
		}
		.view-captcha {
			display: flex;
			margin-top: 35rpx;
			flex-flow: row nowrap;

			.input-captcha {
				width: 423rpx;
				background: #E9EBF4;
				padding: 10rpx 20rpx 10rpx 20rpx;
				opacity: 1;
				border-radius: 8px;
			}

			.btn-captcha {
				width: 200rpx;
				flex-grow: 1;
				margin-left: 23rpx;
				background: #3FA7FF;
				opacity: 1;
				border-radius: 8rpx;

				font-size: 31rpx;
				font-family: SimHei;
				font-weight: 400;
				line-height: 40rpx;
				color: #FFFFFF;
				opacity: 1;
			}
		}

	}

	.ic-phone {
		width: 38rpx;
		height: 59rpx;
	}

	.btn-submit {
		width: 308rpx;
		margin-top: 192rpx;
		height: 62rpx;
		background: #3FA7FF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 4rpx;

		font-size: 31rpx;
		font-family: SimHei;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
	}
</style>
